<style>
  #navigator {
    position: sticky;
    top: 0;
    z-index: 1000;
  }

  #navigator .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  }

  @media (max-width: 720px) {
    #navigator {
      border-bottom: 1px solid #ccc;
    }
  }

  #navigator a {
    font-size: 14px;
  }

  #navigator+section {
    padding: 250px 0;
  }

</style>

<section class="fdb-block p-2" id="navigator">
  <div class="container-fluid">
    <nav class="navbar navbar-expand-md">
      <button class="navbar-toggler mr-auto ml-auto" type="button" data-toggle="collapse" data-target="#navbarNav0" aria-controls="navbarNav0" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse mt-2 mt-md-0" id="navbarNav0">
        <p class="m-auto">
          <a class="btn btn-outline-primary m-1" href="call-to-action.html">Call to action</a>
          <a class="btn btn-outline-primary m-1" href="contacts.html">Contacts</a>
          <a class="btn btn-outline-primary m-1" href="contents.html">Contents</a>
          <a class="btn btn-outline-primary m-1" href="features.html">Features</a>
          <a class="btn btn-outline-primary m-1" href="footers.html">Footers</a>
          <a class="btn btn-outline-primary m-1" href="forms.html">Forms</a>
          <a class="btn btn-outline-primary m-1" href="headers.html">Headers</a>
          <a class="btn btn-outline-primary m-1" href="pricings.html">Pricings</a>
          <a class="btn btn-outline-primary m-1" href="teams.html">Teams</a>
          <a class="btn btn-outline-primary m-1" href="testimonials.html">Testimonials</a>
        </p>
      </div>
    </nav>
  </div>
</section>

<script>
  var page = window.location.pathname.split('/')
  page = page[page.length - 1]

  var nav = document.querySelector('a[href="' + page + '"]')
  if (nav) {
    nav.classList.add('active')
  }

</script>
